<template>
  <div class="wrap">
    <CHeader content="企业风险分级管控" ref="head" />
    <div class="middle-box">
      <div class="container">
        <div
          class="items"
          v-for="item in data"
          :key="item.id"
          :class="[cur == item.id ? 'active' : '']"
          @click="toAnther(item.id)"
        >
          {{ item.address }}
        </div>
      </div>
    </div>
    <div class="box">
      <div
        class="bodyContainer"
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
      >
        <div class="tableContainer">
          <div class="tableTool">
            <div class="total">
              <img
                src="../../../assets/images/main/icon_totalq.png"
                class="qytb"
                alt=""
              />
              企业数：<span
                style="font-size: 20px; font-weight: 400; color: #364064"
                >{{ pageOption.total }}</span
              >
            </div>
            <el-row type="flex" style="padding: 0 16px">
              <el-col :span="24" class="e-c-15">
                <input
                  type="text"
                  class="input-search"
                  placeholder="输入企业名称查询"
                />
                <div class="img-bg">
                  <img src="../../../assets/images/main/icon-search.png" />
                </div>
                <el-button type="primary" class="bt-dc">导出</el-button>
              </el-col>
            </el-row>
          </div>
          <CardTable
            :showHeader="false"
            :data="tableData"
            :pageOption.sync="pageOption"
            @sizeChange="sizeChange"
            @currentChange="currentChange"
            :height="maxHeight"
          >
            <!-- 序号 所属县区 企业名称 变更类型 变更内容 申请日期 审批日期 审批人 -->

            <el-table-column
              align="center"
              prop="serial"
              min-width="30%"
              label="序号"
            >
            </el-table-column>
            <el-table-column
              min-width="80%"
              prop="name"
              label="企业名称"
            ></el-table-column>
            <el-table-column
              align="center"
              min-width="50%"
              prop="fxfxdx"
              label="风险分析对象"
              class="font-blue"
            ></el-table-column>
            <el-table-column
              align="center"
              min-width="50%"
              prop="fxfxdy"
              label="风险分析单元"
              class="font-blue"
            ></el-table-column>
            <el-table-column
              align="center"
              min-width="50%"
              prop="aqfxsj"
              label="安全风险事件"
              class="font-blue"
            ></el-table-column>
            <el-table-column
              align="center"
              min-width="50%"
              prop="gkcs"
              label="管控措施"
              class="font-blue"
            ></el-table-column>
            <el-table-column width="80%" align="center" label="详情">
              <template slot-scope="scope">
                <span
                  size="mini"
                  @click="handleEdit(scope.$index)"
                  style="
                    color: #4d7ee9;
                    text-decoration: underline;
                    cursor: pointer;
                  "
                  >查看</span
                >
              </template>
            </el-table-column>
          </CardTable>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import CHeader from "@/components/Cheader/Cheader";
import CardTable from "@/components/cardTable/cardTable";
// import Select2el from "@/components/select2el/select2el";
import * as browser from "@/utils/browser";
const { IEVersion, resizeObserver } = browser.default;
/**
 * 注：el-date-picker 在当前项目中使用的是 element-ui 的 2.15.2 版本会有警告，不影响正常功能
 * Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "placement"
 */
export default {
  name: "bggl",
  components: {
    CHeader,
    CardTable,
    // Select2el,
  },
  data() {
    return {
      loading: true,
      maxHeight: "100%",
      data: [
        {
          id: 1,
          address: "全市",
        },
        {
          id: 2,
          address: "盐化新区",
        },
        {
          id: 3,
          address: "洪泽县",
        },
        {
          id: 4,
          address: "涟水县",
        },
        {
          id: 5,
          address: "金湖县",
        },
        {
          id: 6,
          address: "清江浦区",
        },
      ],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      regionArray: [
        // 盐化新区 洪泽区 盱眙县 涟水县 金湖县 淮阴区 清江浦区
        { name: "盐化新区", label: "yxxq" },
        { name: "洪泽区", label: "hzq" },
        { name: "盱眙县", label: "xyx" },
        { name: "涟水县", label: "lsx" },
        { name: "金湖县", label: "jhx" },
        { name: "淮阴区", label: "hyq" },
        { name: "清江浦区", label: "qjpq" },
      ],
      changeTypeOptions: [
        // 人员 设备 工艺
        { label: "人员", value: "ry" },
        { label: "设备", value: "sb" },
        { label: "工艺", value: "gy" },
      ],
      // 过滤器
      filter: {
        // 区域
        region: "",
        // 变更类型
        changeType: "",
        // 企业名称
        companyName: "",
        // 时间段
        period: [],
      },
      pageOption: {
        pageSizes: [10, 20, 30, 40, 50, 100, 200, 300, 400, 500, 1000],
        layout: "sizes, total, prev, pager, next, jumper",
        currentPage: 1,
        pageSize: 10,
        total: 0,
      },
      result: {},
      tableData: [],
      value: "",
      cur: 1
    };
  },
  computed: {
    regionOptions() {
      return this.regionArray.map((item) => {
        return {
          value: item.label,
          label: item.name,
        };
      });
    },
  },
  methods: {
    toAnther(id) {
      this.getTableData(true);
      this.cur = id;
    },
    setHeight() {
      this.$el &&
        this.$nextTick(() => {
          let mainHeight =
              window.innerHeight -
              document.querySelector(".header-container").offsetHeight,
            header = this.$refs.head ? this.$refs.head.$el : null,
            bodyTop = this.$el.querySelector(".bodyTop"),
            tableTool = this.$el.querySelector(".tableTool"),
            paddingTop = 20,
            height = mainHeight - paddingTop -55;
          if (header) {
            height -= header.offsetHeight;
          }
          if (bodyTop) {
            height -= bodyTop.offsetHeight;
          }
          if (tableTool) {
            height -= tableTool.offsetHeight;
          }
          this.maxHeight = height + "px";
        });
    },
    onSubmit() {
      /**
       * 查询的时候重置页码
       * this.filter 为查询条件
       * this.pageOption 为分页条件
       * this.tableData 为表格数据
       * this.pageOption.currentPage 当前页码
       * this.pageOption.total 为总条数
       */
      console.log(this.filter, this.pageOption);
    },
    initFilter() {
      Object.keys(this.filter).forEach((key) => {
        if (this.$route.query[key]) {
          this.filter[key] = this.$route.query[key];
        }
      });
    },
    init() {
      this.loading = true;
      setTimeout(() => {
        this.getTableData(true);
        this.loading = false;
      }, 1000);
    },
    getTableData(retry = false) {
      this.tableData = [];
      setTimeout(() => {
        let i =
          this.pageOption.currentPage == 1
            ? this.pageOption.currentPage
            : 1 + this.pageOption.pageSize * (this.pageOption.currentPage - 1);
        this.tableData = [
          {
            // 序号 所属县区 企业名称 变更类型 变更内容 申请日期 审批日期 审批人
            serial: i++,
            name: "江苏永安化工",
            fxfxdx: "100",
            fxfxdy: "100",
            aqfxsj: "100",
            gkcs: "100",
          },
        ];
        if (retry) {
          this.pageOption.currentPage = 1;
          this.pageOption.total = Math.floor(Math.random() * 1000);
        }
        let tempCount = this.pageOption.pageSize - this.tableData.length;
        for (let index = this.tableData.length; index < tempCount; index++) {
          let item = {
            serial: i++,
            name: "江苏永安化工",
            fxfxdx: "100",
            fxfxdy: "100",
            aqfxsj: "100",
            gkcs: "100",
          };
          this.tableData.push(item);
        }
      }, 1000);
    },
    sizeChange(val) {
      this.pageOption.pageSize = val;
      this.getTableData();
    },
    currentChange(val) {
      this.pageOption.currentPage = val;
      this.getTableData();
    },
  },
  resizeMain: null,
  mounted() {
    Object.keys(this.$route.query).length > 0 && this.initFilter();
    this.init();
    if (IEVersion() == -1) {
      resizeObserver(
        this.$el,
        () => {
          this.setHeight();
        },
        this.resizeMain
      );
    }
  },
  destroyed() {
    if (IEVersion() == -1) {
      this.resizeMain && this.resizeMain.disconnect();
    }
  },
};
</script>

<style scoped lang="scss">
.wrap {
  width: 100%;
  min-height: 100%;
  text-align: left;
  background-color: rgb(243, 245, 251);
  .header_wrap {
    background-color: #fff;
    border-bottom: 1px solid #e0eaf5;
  }
  .box {
    padding: 20px 0 0;
    max-width: 100%;
    .el-radio-group {
      padding: 0 20px;
    }
    :deep .el-radio-button {
      .el-radio-button__inner {
        max-height: 36px;
        padding: 6px 20px;
        line-height: 24px;
        font-size: 16px;
        font-weight: 400;
      }
      &.is-active .el-radio-button__inner {
        background-color: #5184ea;
        position: relative;
        &::after {
          content: "";
          position: absolute;
          bottom: -10px;
          left: 50%;
          border-top: 5px solid #5184ea;
          border-left: 5px solid transparent;
          border-bottom: 5px solid transparent;
          border-right: 5px solid transparent;
        }
      }
    }
    .bodyContainer {
      min-height: 30vh;
      background: #fdffff;
      .bodyTop {
        padding: 0 32px;
        min-height: 74px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #e0eaf5;
        .el-form-item {
          margin-bottom: 0;
          .el-form-item__label {
            font-size: 16px;
            font-weight: 400;
            color: #333;
          }
          .el-form-item__content {
            width: 220px;
            font-size: 16px;
            font-weight: 400;
            color: #333;
            /*对齐方式为居中*/
            vertical-align: middle;
          }
        }
      }
      .tableTool {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 72px;
      }
      .tableContainer {
        padding: 0 32px;
      }
    }

    :deep .bodyContainer {
      .bodyTop {
        .el-form {
          .el-form-item {
            .el-form-item__content {
              vertical-align: middle;
            }
          }
        }
        .el-button--primary {
          width: 82px;
          height: 32px;
          line-height: 32px;
          background: linear-gradient(90deg, #5177e4 0%, #5186eb 100%);
          box-shadow: 0 2px 4px 0 rgba(81, 133, 235, 0.5);
          border-radius: 4px;
          padding: 0 20px;
        }
      }
      .el-table__header-wrapper {
        max-height: 46px;
        thead .el-table__cell {
          max-height: 22px;
          line-height: 22px;
          background: #f0f4f9;
        }
      }
      .tableTool .el-button--primary {
        width: 82px;
        height: 32px;
        line-height: 32px;
        background: linear-gradient(90deg, #5177e4 0%, #5186eb 100%);
        box-shadow: 0 2px 4px 0 rgba(81, 133, 235, 0.5);
        border-radius: 4px;
        padding: 0 20px;
      }
    }
  }
}
.flex {
  display: flex;
}
.center {
  justify-content: center;
  align-items: center;
}
.flex {
  > * {
    vertical-align: middle;
  }
  span {
    margin: 0 4px;
  }
  .tips {
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    text-decoration: underline;
    color: #4d7ee9;
  }
  i {
    color: #4d7ee9;
  }
}
.red {
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #f83a3a;
}
:deep .el-table th {
  box-sizing: border-box;
  color: #5d6c8e;
  background-color: #f0f4f9;
  padding: 0;
}
.qytb {
  vertical-align: middle;
  margin-right: 5px;
}
.img-bg {
  width: 39px;
  height: 32px;
  text-align: center;
  background: #5184ea;
  border-radius: 0 4px 4px 0;
}
.bt-dc {
  width: 82px;
  height: 32px;
  margin-left: 60px;
  margin-right: -10px;
  background: linear-gradient(90deg, #5177e4 0%, #5186eb 100%);
  box-shadow: 0 2px 4px 0 rgba(81, 133, 235, 0.5);
  border-radius: 4px;
  font-size: 16px;
  font-weight: 400;
  color: #ffffff;
  line-height: 32px;
  float: right;
  cursor: pointer;
}
input::input-placeholder {
  color: #c3cada;
}
.e-c-15 {
  display: flex;
  justify-content: right;
  .input-search {
    border: 1px solid #e3e6ec;
    height: 28px;
  }
}
::-webkit-input-placeholder {
  /* WebKit browsers */
  color: #c3cada;
  font-size: 14px;
  padding: 1px 10px;
}
:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: #c3cada;
  font-size: 14px;
  padding: 1px 10px;
}
::-moz-placeholder {
  /* Mozilla Firefox 19 */
  color: #c3cada;
  font-size: 14px;
  padding: 1px 10px;
}
:-ms-input-placeholder {
  /* Internet Explorer 10 */
  color: #c3cada;
  font-size: 14px;
  padding: 0 10px;
}
.middle-box {
  font-family: Microsoft YaHei;
  padding-bottom: 10;
}
.container {
  display: flex;
  padding-top: 20px;
  margin-left: 27px;
  .items {
    min-width: 65px;
    text-align: center;
  }
  .items:first-child {
    position: relative;
    padding: 10px 20px;
    font-size: 16px;
    line-height: 10px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #5d6c8e;
    background: #ffffff;
    border: 1px solid #e3e6ec;
    border-radius: 6px 0 0 6px;
    cursor: pointer;
  }
  .items:last-child {
    position: relative;
    padding: 10px 20px;
    font-size: 16px;
    line-height: 10px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #5d6c8e;
    background: #ffffff;
    border: 1px solid #e3e6ec;
    border-radius: 0 6px 6px 0;
    cursor: pointer;
  }
  .items:not(:first-child):not(:last-child) {
    position: relative;
    padding: 10px 20px;
    font-size: 16px;
    line-height: 10px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #5d6c8e;
    background: #ffffff;
    border: 1px solid #e3e6ec;
    cursor: pointer;
  }
  .active {
    background: #5184ea !important;
    color: #fefefe !important;
    &::before {
      content: "";
      position: absolute;
      top: 30px;
      left: 50%;
      border-top: 5px solid #5184ea;
      border-left: 5px solid transparent;
      border-bottom: 5px solid transparent;
      border-right: 5px solid transparent;
    }
  }
}
</style>